<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="base/head::head"/>
<!--表单字段配置，主要用在表单的新增和修改-->
<body class="easyui-layout">
<div th:replace="base/load::load"/>
<div id="west-tool">
    <a href="#" class="icon-refresh" onclick="onRefreshDataList()"></a>
</div>
<div id="table-tool">
    <a id="btn-edit" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="onOpenEditDialog()">修改</a>
    <a id="btn-refresh" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-refresh',plain:true" onclick="onRefresh()">刷新</a>
    <a id="btn-sync" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-sync',plain:true" onclick="onSync()">同步</a>
</div>
<div data-options="region:'west',split:true,title:'业务表单',tools:'#west-tool'" style="width:200px;">
    <div id="list" class="easyui-datalist" data-options="url:'../form/list?formStatus=1',valueField:'formName',textField:'formDisplay',method:'get',fit:true,border:false,animate:true,onClickRow:onListItemClick"></div>
</div>
<div data-options="region:'center',title:'表单组件列表'" style="overflow: hidden;">
    <table id="table" class="easyui-datagrid" data-options="fit:true,singleSelect:true,rownumbers:true,toolbar:'#table-tool'">
        <thead>
        <tr>
            <th data-options="field:'id',checkbox:true"></th>
            <th data-options="field:'formName',width:100">表单标识</th>
            <th data-options="field:'tableName',width:100">表名</th>
            <th data-options="field:'fieldName',width:100">字段名</th>
            <th data-options="field:'fieldLabel',width:100">标签名称</th>
            <th data-options="field:'labelColor',width:100">标签颜色</th>
            <th data-options="field:'fieldType',width:100">字段类型</th>
            <th data-options="field:'fieldDefault',width:100">默认值</th>
            <th data-options="field:'isShow',width:100">是否显示</th>
            <th data-options="field:'showOrder',width:100">显示顺序</th>
            <th data-options="field:'showType',width:100">显示方式</th>
            <th data-options="field:'referId',width:100">参照id</th>
            <th data-options="field:'referField',width:100">参照返回字段</th>
            <th data-options="field:'cmpName',width:100">组件名称</th>
            <th data-options="field:'cmpType',width:100">组件类型</th>
            <th data-options="field:'isRequired',width:100">是否必输</th>
            <th data-options="field:'validType',width:100">验证类型</th>
            <th data-options="field:'maxLength',width:100">最大长度</th>
            <th data-options="field:'prompt',width:100">组件提示语</th>
            <th data-options="field:'roles',width:100">角色</th>
        </tr>
        </thead>
    </table>
</div>
<!--弹出框-->
<div id="dialog" class="easyui-dialog uq_dialog" data-options="title:'操作',closed:true,buttons:'#dialog-tool'">
    <form id="form" method="post">
        <input id="id" name="id" type="hidden"/>
        <table>
            <tr>
                <td>物理表名:</td>
                <td><input id="tableName" name="tableName" class="easyui-textbox" style="width: 200px" data-options="required:true,editable:false"/></td>
                <td>表单标识:</td>
                <td><input id="formName" name="formName" class="easyui-textbox" style="width: 200px" data-options="required:true,editable:false"/></td>
            </tr>
            <tr>
                <td>字段名:</td>
                <td><input id="fieldName" name="fieldName" class="easyui-textbox" style="width: 200px" data-options="required:true,editable:false"/></td>
                <td>标签名称:</td>
                <td><input id="fieldLabel" name="fieldLabel" class="easyui-textbox" style="width: 200px" data-options="required:true,validType:'length[1,64]',prompt:'组件标签名称'"/></td>
            </tr>
            <tr>
                <td>标签颜色:</td>
                <td>
                    <select id="labelColor" name="labelColor" class="easyui-combobox" style="width: 200px" data-options="value:'',required:true,panelHeight:'auto'">
                        <option value="">无</option>
                        <option value="red">红色</option>
                        <option value="blue">绿色</option>
                        <option value="green">蓝色</option>
                    </select>
                </td>
                <td>字段类型:</td>
                <td><input id="fieldType" name="fieldType" class="easyui-textbox" style="width: 200px" data-options="required:true,editable:false"/></td>
            </tr>
            <tr>
                <td>默认值:</td>
                <td><input id="fieldDefault" name="fieldDefault" class="easyui-textbox" style="width: 200px" data-options="validType:'length[1,32]',prompt:'默认值可以使单个值或json'"/></td>
                <td>显示顺序:</td>
                <td><input id="showOrder" name="showOrder" class="easyui-numberspinner" style="width: 200px" data-options="min:0,required:true,prompt:'显示顺序'"/></td>
            </tr>
            <tr>
                <td>显示方式:</td>
                <td>
                    <select id="showType" name="showType" class="easyui-combobox" style="width: 200px" data-options="value:'all',required:true,validType:'length[1,4]',prompt:'显示方式add=新增是否显示，edit=修改时显示，all=全显示'">
                        <option value="all">全显示</option>
                        <option value="add">新增显示</option>
                        <option value="edit">编辑显示</option>
                    </select>
                </td>
                <td>参照:</td>
                <td><input id="referId" name="referId" class="easyui-textbox" style="width: 200px" data-options=""/></td>
            </tr>
            <tr>
                <td>返回字段</td>
                <td><input id="referField" name="referField" class="easyui-textbox" style="width: 200px" data-options="validType:'length[1,64]',prompt:'参照选择时，联动字段，格式id=1,name=2,对应表单中的name或id'"/></td>
                <td>组件名称:</td>
                <td>
                    <select id="cmpName" name="cmpName" class="easyui-combobox" style="width: 200px" data-options="value:'text',required:true,validType:'length[1,16]',prompt:'组件名称',panelHeight:'auto'">
                        <option value="input">input</option>
                        <option value="select">select</option>
                        <option value="dive">div</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>组件类型:</td>
                <td>
                    <select id="cmpType" name="cmpType" class="easyui-combobox" style="width: 200px" data-options="required:true,validType:'length[1,16]',panelHeight:'auto'">
                        <option value="textbox">textbox</option>
                        <option value="checkbox">checkbox</option>
                        <option value="radiobutton">radiobutton</option>
                        <option value="combobox">combobox</option>
                        <option value="combotree">combotree</option>
                        <option value="numberbox">numberbox</option>
                        <option value="numberspinner">numberspinner</option>
                        <option value="timespinner">timespinner</option>
                        <option value="datebox">datebox</option>
                        <option value="datetimebox">datetimebox</option>
                        <option value="datetimespinner">datetimespinner</option>
                        <option value="filebox">filebox</option>
                    </select>
                </td>
                <td>是否必输:</td>
                <td>
                    <select id="isRequired" name="isRequired" class="easyui-combobox" style="width: 200px" data-options="value:0,required:true,panelHeight:'auto'">
                        <option value="0">必输</option>
                        <option value="1">不是</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>验证类型:</td>
                <td><input id="validType" name="validType" class="easyui-textbox" style="width: 200px" data-options="validType:'length[1,64]',prompt:'组件验证类型'"/></td>
                <td>最大长度:</td>
                <td><input id="maxLength" name="maxLength" class="easyui-textbox" style="width: 200px" data-options="editable:false,equired:true,prompt:'最大长度'"/></td>
            </tr>
            <tr>
                <td>组件提示语:</td>
                <td><input id="prompt" name="prompt" class="easyui-textbox" style="width: 200px" data-options="required:true,validType:'length[1,64]',prompt:'在输入框显示的提示消息'"/></td>
                <td>角色:</td>
                <td>
                    <div id="roles" name="roles" class="easyui-combotree" style="width: 200px" data-options="url:'../role/tree',method:'get',multiple:true,panelHeight:'auto'"/>
                </td>
            </tr>
            <tr>
                <td>是否显示:</td>
                <td>
                    <select id="isShow" name="isShow" class="easyui-combobox" style="width: 200px" data-options="vlaue:0,required:true,panelHeight:'auto',prompt:'是否显示'">
                        <option value="0">显示</option>
                        <option value="1">隐藏</option>
                    </select>
                </td>
            </tr>
        </table>
    </form>
</div>
<div id="dialog-tool">
    <a id="dialog-save" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="onSave()">保存</a>
    <a id="dialog-close" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-close'" onclick="javascript:$('#dialog').dialog('close')">关闭</a>
</div>
<script type="text/javascript" th:src="@{/utils/System.js}"></script>
<script type="text/javascript">

    // 刷新datalist
    function onRefreshDataList() {
        $("#list").datalist("reload");
        $("#table").datagrid("unselectAll");
        $("#table").datagrid("loadData", []);
    }

    function onListItemClick(index, node) {
        loadFormField(node.formName);
    }

    function loadFormField(formName) {
        if (formName == null || formName == "") {
            return;
        }
        $("#table").datagrid({
            "url": "find?fn=" + formName,
            "method": "get"
        });
    }

    // 同步
    function onSync() {
        var formVO = $("#list").datalist("getSelected");
        if (formVO == null) {
            AlertUtil.error("请选择业务表单后，在操作！");
            return;
        }
        $.messager.confirm("提示", "同步将覆盖之前配置信息,是否同步？", function (isOk) {

            if (isOk) {

                AjaxUtil.get("sync?fn=" + formVO.formName + "&tn=" + formVO.tableName, function (data) {
                    loadFormField(formVO.formName);
                });

            }

        });

    }
</script>
</body>
</html>

